<template>
  <div class="card-page">
    <el-card>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="80px"
        :inline="true"
      >
        <el-form-item label="订单编号">
          <el-input
            placeholder="请输入订单编号"
            v-model="form.orderNo"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="选择日期">
          <el-date-picker
            v-model="form.timeRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            style="background: #5f84ff; color: #fff"
            @click="searchTask"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table :data="orderList" style="width: 100%">
        <el-table-column
          type="index"
          :index="index"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="268"
        ></el-table-column>
        <el-table-column
          prop="skuName"
          label="商品名称"
          width="268"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="订单金额(元)"
          width="268"
        ></el-table-column>
        <el-table-column
          prop="innerCode"
          label="设备编号"
          width="268"
        ></el-table-column>
        <el-table-column
          prop="payStatus"
          label="订单状态"
          width="268"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="订单日期"
          width="160"
        ></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button type="text" @click="getOrderDetail(row.orderNo)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="footer" v-show="showFooter">
        <span
          >共{{ totalCount }}条记录 第{{ params.pageIndex }}/{{
            totalPage
          }}页</span
        >
        <div class="btn">
          <el-button :disabled="params.pageIndex === 1" @click="prevPage"
            >上一页</el-button
          >
          <el-button @click="nextPage">下一页</el-button>
        </div>
      </div>
    </el-card>

    <el-dialog
      :visible.sync="dialogVisible"
      width="32%"
      round
      :close-on-click-modal="false"
    >
      <h3 slot="title">订单详情</h3>
      <div class="status" style="background: #f8f8f8">
        <el-result
          icon="success"
          title="支付完成"
          v-if="orderDetail.payStatus === '支付完成'"
          :key="1"
        >
          <template #extra>
            <img :src="baseUrl + '/img/pic_2.3b5af41c.png'" alt="" />
          </template>
        </el-result>
        <el-result
          icon="success"
          title="出货成功"
          v-else-if="orderDetail.payStatus === '出货成功'"
          :key="2"
        >
          <template #extra>
            <img :src="baseUrl + '/img/pic_2.3b5af41c.png'" alt="" />
          </template>
        </el-result>
        <el-result
          title="创建"
          v-else-if="orderDetail.payStatus === '创建'"
          :key="3"
        >
          <template #icon>
            <i class="el-icon-alarm-clock"></i>
          </template>
          <template #extra>
            <img :src="baseUrl + '/img/pic_1.834b274c.png'" alt="" />
          </template>
        </el-result>
        <el-result icon="error" title="出货失败" v-else :key="4">
          <template #extra>
            <img :src="baseUrl + '/img/pic_2.3b5af41c.png'" alt="" />
          </template>
        </el-result>
      </div>
      <div style="padding-left: 30px">
        <el-descriptions :column="2">
          <el-descriptions-item label="订单编号">{{
            orderDetail?.orderNo
          }}</el-descriptions-item>
          <el-descriptions-item label="商品名称">{{
            orderDetail?.skuName
          }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">{{
            orderDetail?.price
          }}</el-descriptions-item>
          <el-descriptions-item label="设备编号">{{
            orderDetail?.innerCode
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            orderDetail?.createTime
          }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{
            orderDetail?.updateTime
          }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{
            orderDetail?.payType === 1 ? '支付宝' : '微信'
          }}</el-descriptions-item>
          <el-descriptions-item label="设备地址">{{
            orderDetail?.addr
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dealList, setPagination } from '@/utils/other'
import { searchOrder } from '@/apis/oder'
import { mapState } from 'vuex'
export default {
  name: 'order-page',
  components: {},
  props: {},
  data() {
    return {
      form: {
        orderNo: '',
        timeRange: []
      },
      rules: {},
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      orderList: [],
      totalCount: '',
      totalPage: '',
      dialogVisible: false,
      orderDetail: {}
    }
  },
  computed: {
    showFooter() {
      return this.totalPage > 1
    },
    ...mapState(['baseUrl'])
  },
  watch: {},
  created() {
    this.searchOrder(this.params)
  },
  methods: {
    async searchOrder(params) {
      const res = await searchOrder(params)
      setPagination(this, res)
      this.orderList = dealList(res.currentPageRecords)
    },
    searchTask() {
      const { orderNo } = this.form
      const [startDate, endDate] = this.form.timeRange
      const searchForm = { orderNo, startDate, endDate }
      this.searchOrder({ ...this.params, ...searchForm })
    },
    async getOrderDetail(orderNo) {
      this.dialogVisible = true
      this.orderDetail = this.orderList.filter(
        (item) => item.orderNo === orderNo
      )[0]
    },
    index(index) {
      return (this.params.pageIndex - 1) * 10 + index + 1
    },
    prevPage() {
      this.params.pageIndex -= 1
      this.searchOrder(this.params)
    },
    nextPage() {
      this.params.pageIndex += 1
      this.searchOrder(this.params)
    }
  }
}
</script>

<style scoped lang="scss">
.el-table {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
.footer {
  height: 96px;
  padding: 32px 16px;
  box-sizing: border-box;
  span {
    float: left;
    color: #dbe2ec;
  }
  .btn {
    float: right;
    .el-button {
      width: 70px;
      height: 32px;
      padding: 0;
      text-align: center;
      line-height: 32px;
      background-color: #d5ddf8;
    }
  }
}
::v-deep .el-dialog__wrapper {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  .el-dialog {
    border-radius: 10px !important;
    min-height: 215px;
    max-height: 630px;
    .el-dialog__header h3 {
      font-size: 16px;
      color: #333;
    }
    .el-dialog__body {
      padding: 20px 20px 30px;
    }
    .el-dialog__footer {
      text-align: center;
      .el-button {
        background-color: #fbf4f0;
      }
    }
  }
}
.el-result {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  height: 54px;
  padding: 0;
  margin-bottom: 25px;
  ::v-deep .el-result__icon {
    margin-left: 22px;
    .icon-success {
      width: 30px;
      height: 30px;
    }
  }
  ::v-deep .el-result__title {
    width: 360px;
    margin-top: 0;
    margin-left: 16px;
    p {
      text-align: left;
      line-height: 54px;
      font-size: 14px;
    }
  }
  ::v-deep .el-result__extra {
    margin-top: -10px;
  }
}
</style>
